import { h } from 'vue'
import { ElIcon } from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

export default {
  props: {
    elIcon: ''
  },
  data() {
    return {}
  },
  render() {
    const elIconsKey = this.elIcon
    const renderIcon = [] as any
    if (!elIconsKey) {
      const classString = this.$attrs.class
      const iconArray = classString
        .split(' ')
        .filter((item: string) => item.indexOf('el-icon-') == 0)
      if (iconArray.length > 0) {
        iconArray.map((nodeKey: string) => {
          const _nodeKey = nodeKey
            .replace(/el-icon-/g, '')
            .replace(/^([a-z])/, res => res.toLocaleUpperCase()) //首字母大写
          renderIcon.push(
            h((ElementPlusIconsVue as any)[_nodeKey], {
              // color: 'blue', //设置默认值
              color: this.$attrs.color || null,
              size: this.$attrs.size || null
            })
          )
        })
      }
    } else {
      const _nodeKey = elIconsKey.replace(/^([a-z])/, (res: string) => res.toLocaleUpperCase()) //首字母大写
      renderIcon.push(
        h((ElementPlusIconsVue as any)[_nodeKey], {
          // color: 'blue', //设置默认值
          color: this.$attrs.color || null,
          size: this.$attrs.size || null
        })
      )
    }

    return h(
      ElIcon,
      {
        // size: '16px', //设置默认值
        ...this.$attrs
      },
      () => renderIcon
    )
  }
} as any
